<template>
<el-card class="box-card">
    <div slot="header" class="clearfix">
    <h1 class="container-title fl">物流线路分析</h1>
     </div>
     <div>
         <font>发货地:</font><el-cascader :options="options" :show-all-levels="false" v-model="saddress"></el-cascader>
         <font>收货地:</font><el-cascader :options="options" :show-all-levels="false" v-model="caddress"></el-cascader>
        <el-date-picker
      v-model="time"
      type="daterange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['00:00:00', '23:59:59']">
    </el-date-picker>
    <el-button type="primary" @click="findall">确定</el-button>
     </div>
       <div class="amap-page-container">
        <el-amap vid="amap" :zoom="zoom" :center="center" class="amap-demo">
        <el-amap-polyline :editable="polyline.editable"  :path="polyline.path" :events="polyline.events"></el-amap-polyline>
      </el-amap>
      </div>
      <div class="box-right">
          <table>
            <tr v-for="i in table">
              <td>{{i.name}}</td>
            </tr>
          </table>
      </div>
  


</el-card>
</template>
<script>
  import {getress,anafind} from '../api/api'
        export default {
    
            data(){
                return {
                  table:[],
                  caddress:'',
                  saddress:'',
                  time:'',
                  zoom: 12,
                  center: [121.5273285, 31.25515044],
                  polyline: {
                  path: [[121.5389385, 31.21515044], [121.5389385, 31.29615044]],
                  events: {
                        click(e) {
                   alert('click polyline');
                    },
                  end: (e) => {
                    let newPath = e.target.getPath().map(point => [point.lng, point.lat]);
                    console.log(newPath);
                   }
                 },
                editable: false
                }, 
                options: []
              
                   
                    
                }
            },
            //定义组建标签
            components:{
            },
            filters: {
     
　　},
            //自定义方法
            methods:{
               changeEditable() {
                this.polyline.editable = !this.polyline.editable;
                },
                getaddress:function(){
                    getress().then( res => {
                    this.options=res.data
                     console.log(res)
         
              })
                },
                findall:function(){
                  console.log(this.saddress[1])
                  console.log(this.caddress[1])
                  console.log(this.time)
                  var a=this.time[0]
                  var b=this.time[1]
                  console.log(a)
                  console.log(b)
                  var d = new Date(a);
                  var starttime=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
                  var e = new Date(b);
                  var endtime=e.getFullYear() + '-' + (e.getMonth() + 1) + '-' + e.getDate() + ' ' + e.getHours() + ':' + e.getMinutes() + ':' + e.getSeconds();
                  console.log(starttime,endtime)
                  var params={'saddress':this.saddress[1],'caddress':this.caddress[1],'starttime':starttime,'endtime':endtime}
                  anafind(params).then( res => {
                    if(res.code==200){
                      this.$message('获取成功')
                      this.center=res.saddress
                      var dlist=[res.saddress,res.caddress]
                      this.polyline['path']=dlist
                      this.table=res.data
                    }else {
                      this.$message(res.message)
                    }
         
              })
                }
            
    
            },
            //钩子方法
            mounted:function(){
              this.getaddress()
            
    

      
    
            },
            //监听属性
            watch:{
    
    
            },
            //计算属性
            computed:{
    
    
            }
    
    
    
        }
    
    
    </script>
    
    <style>
.box-right{
    float:left;
    height: 400px;  
    width: 400px;
    background :white;
    margin-left:200px;
}

.box-card{
        
    height:600px;

    }
    
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .container-title {
    font-size: 20px;
    line-height: 32px;
    font-weight: normal;
    color: #39486c;
  }
  .fl {
    float: left;
  }
  .btn-add {
    display: inline-block;
    width: 100px;
    height: 32px;
    font-weight: normal;
    font-size: 12px;
    line-height: 32px;
    border-radius: 3px;
    color: #fff;
    text-indent: 36px;
    background: #547edf url(http://lilly.zenm.vip/images/icon-add-btn.png) 16px center no-repeat;
}
.fr {
    float: right;
}
a {
    text-decoration: none;
}
.iot-table {
    width: 100%;
    font-size: 11px;
    color: #39486c;
    line-height: 48px;
}
table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
    
}

thead{
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
.amap-page-container {
      height: 400px;  
      width: 400px;
      float:left
    }


    </style>
